<template>
  <div>
    <bread-crumb
      class="bread-crumb-padding"
      :list="breadCrumb"
      :user="true"
    ></bread-crumb>
    <div class="user-main-box">
      <user-tab-list :list="tablist" :returnButton="true"></user-tab-list>
      <div class="filter-line b-b-d flx-row-s-c">
        <span class="item-name">状态</span>
        <div class="flx-row-s-c" style="width:185px;">
          <span class="c-g" style="flex-shrink:0">待发货</span>
          <div class="user-strong-button form-line-button-size" style="margin-left: 15px;">确认收货</div>
        </div>
        <span class="item-name">联系人</span>
        <div class="flx-row-s-c" style="width:185px;">
          <span class="c-g" style="flex-shrink:0">马江林</span>
          <span class="c-g" style="margin-left:17px;flex-shrink:0">15886829722</span>
        </div>
        <span class="item-name">收货地址</span>
        <span class="c-g">广东省深圳市宝安区西乡街道华丰国际机器人产业园</span>
      </div>
      <div class="filter-line b-b-d flx-row-s-c">
        <span class="item-name">快递公司</span>
        <span class="c-g" style="width:156px;">顺丰快递</span>
        <span class="item-name">快递单号</span>
        <span class="c-g" style="flex-shrink:0">SF000015886829722</span>
        <div class="user-normal-button form-line-button-size" style="margin-left: 15px;">复制</div>
      </div>
      <div class="filter-line search-result-line flx-row-bw-c">
        <span class="c-g f-14">礼品清单</span>
      </div>
      <table class="table-area">
        <thead>
          <tr>
            <th><div class="line-style">序号</div></th>
            <th><div class="line-style">礼品信息</div></th>
            <th><div class="line-style">礼品数量</div></th>
            <th><div class="line-style">所需积分</div></th>
            <th><div class="line-style">小计</div></th>
            <th><div class="line-style">订单编号</div></th>
            <th><div class="line-style">兑换时间</div></th>
          </tr>
        </thead>
        <tbody>
          <tr class="lc-f">
            <td>
              <div class="line-style"><span class="normal-f">1</span></div>
            </td>
            <td>
              <div class="line-style flx-row-s-c" style="padding: 10px 0;">
                <div class="form-img"></div>
                <span class="normal-f" style="white-space: pre-wrap;word-break: break-all;">mmjimjimjimjimjiji.cn</span>
              </div>
            </td>
            <td>
              <div class="line-style">
                <span class="normal-f">1</span>
              </div>
            </td>
            <td>
              <div class="line-style"><span class="normal-f">2299积分</span></div>
            </td>
            <td>
              <div class="line-style"><span class="normal-f">2299积分</span></div>
            </td>
            <td>
              <div class="line-style"><span class="normal-f">JF000002</span></div>
            </td>
            <td>
              <div class="line-style"><span class="normal-f">2021-02-03 10:20:03</span></div>
            </td>
          </tr>
          <tr class="lc-F9FAFB">
            <td>
              <div class="line-style"><span class="normal-f">1</span></div>
            </td>
            <td>
              <div class="line-style flx-row-s-c" style="padding: 10px 0;">
                <div class="form-img"></div>
                <span class="normal-f" style="white-space: pre-wrap;word-break: break-all;">mmjimjimjimjimjiji.cn</span>
              </div>
            </td>
            <td>
              <div class="line-style">
                <span class="normal-f">1</span>
              </div>
            </td>
            <td>
              <div class="line-style"><span class="normal-f">2299积分</span></div>
            </td>
            <td>
              <div class="line-style"><span class="normal-f">2299积分</span></div>
            </td>
            <td>
              <div class="line-style"><span class="normal-f">JF000002</span></div>
            </td>
            <td>
              <div class="line-style"><span class="normal-f">2021-02-03 10:20:03</span></div>
            </td>
          </tr>
          <tr class="lc-f">
            <td>
              <div class="line-style"><span class="normal-f">1</span></div>
            </td>
            <td>
              <div class="line-style flx-row-s-c" style="padding: 10px 0;">
                <div class="form-img"></div>
                <span class="normal-f" style="white-space: pre-wrap;word-break: break-all;">mmjimjimjimjimjiji.cn</span>
              </div>
            </td>
            <td>
              <div class="line-style">
                <span class="normal-f">1</span>
              </div>
            </td>
            <td>
              <div class="line-style"><span class="normal-f">2299积分</span></div>
            </td>
            <td>
              <div class="line-style"><span class="normal-f">2299积分</span></div>
            </td>
            <td>
              <div class="line-style"><span class="normal-f">JF000002</span></div>
            </td>
            <td>
              <div class="line-style"><span class="normal-f">2021-02-03 10:20:03</span></div>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="form-page-bottom-area flx-row-e-c filter-line">
        <span class="item-name">订单总计</span>
        <span class="c-g">2999积分</span>
        <span class="item-name">实际支付</span>
        <span class="c-o">2999积分</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "VipPointsOrder",
  data() {
    return {
      breadCrumb: [{ name: "积分订单" }, { name: "订单详情" }],
      tablist: [
        {
          name: "积分订单详情",
          to: "/user/orderdetail",
        },
      ]
    };
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.mg-r-25 {
  margin-right: 25px;
}
.form-img {
  @include size(48px);
  @include bg-setting(null, cover, center);
  background-color: #F7F7F7;
  margin-right: 10px;
  flex-shrink: 0;
}
</style>